<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定义税率和速算扣除数对应表，这里简单示意，实际更复杂，可根据税法完整细则完善
const taxRates = [
    { range: [0, 36000], rate: 0.03, deduction: 0 },
    { range: [36000, 144000], rate: 0.1, deduction: 2520 },
    { range: [144000, 300000], rate: 0.2, deduction: 16920 },
    { range: [300000, 420000], rate: 0.25, deduction: 31920 },
    { range: [420000, 660000], rate: 0.3, deduction: 52920 },
    { range: [660000, 960000], rate: 0.35, deduction: 85920 },
    { range: [960000, Infinity], rate: 0.45, deduction: 181920 }
];


function jiusuan() {
    // 获取本月工资输入框的值，并转换为数字类型，如果为空则默认为0
    const gongzi = parseFloat(document.getElementById('gongzi').value) || 0;
    // 获取各项社会保险费输入框的值，并转换为数字类型，如果为空则默认为0
    const baoxian = parseFloat(document.getElementById('baoxian').value) || 0;


    // 计算应纳税所得额
    const taxableIncome = gongzi - baoxian - 5000;
    document.getElementById('e').innerHTML = taxableIncome;


    // 根据应纳税所得额确定税率和速算扣除数
    let rate = 0;
    let deduction = 0;
    for (const item of taxRates) {
        if (taxableIncome >= item.range[0] && taxableIncome < item.range[1]) {
            rate = item.rate;
            deduction = item.deduction;
            break;
        }
    }
    document.getElementById('shuilv').innerHTML = (rate * 100);
    document.getElementById('kouchu').innerHTML = deduction;


    // 计算应纳税额（累计应缴税款）
    const taxAmount = taxableIncome * rate - deduction;
    document.getElementById('yingjiao').value = taxAmount;


    // 假设已缴税款这里先默认为0，实际应用中可从页面获取对应输入框的值
    const paidTax = 0;
    document.getElementById('yijiao').value = paidTax;


    // 计算应补（退）税款
    const taxToPayOrRefund = taxAmount - paidTax;
    document.getElementById('tui').value = taxToPayOrRefund;


    // 计算实发工资
    const actualIncome = gongzi - taxAmount;
    document.getElementById('shifa').value = actualIncome;
}


function shuru() {
    const gongzi = parseFloat(document.getElementById('gongzi').value) || 0;
    const baoxian = parseFloat(document.getElementById('baoxian').value) || 0;
    const leiji = document.getElementById('leiji');
    leiji.value = gongzi + "";
}


function shuru2() {
    const baoxian = parseFloat(document.getElementById('baoxian').value) || 0;
    const leiji2 = document.getElementById('leiji2');
    leiji2.value = baoxian + "";
}


function chongzhi() {
    // 将本月工资输入框的值清空
    document.getElementById('gongzi').value = "";
    // 将工资累计输入框的值清空
    document.getElementById('leiji').value = "";
    // 将各项社会保险费输入框的值清空
    document.getElementById('baoxian').value = "";
    // 将社会保险费累计输入框的值清空
    document.getElementById('leiji2').value = "";


    // 将应纳所得额显示内容重置为0元
    document.getElementById('e').innerHTML = "";
    // 将使用税率显示内容重置为0%
    document.getElementById('shuilv').innerHTML = "";
    // 将速算扣除数显示内容重置为0元
    document.getElementById('kouchu').innerHTML = "";
    // 将累计应缴税款输入框的值清空
    document.getElementById('yingjiao').value = "";
    // 将已缴税款输入框的值清空
    document.getElementById('yijiao').value = "";
    // 将应补（退）税款输入框的值清空
    document.getElementById('tui').value = "";
    // 将实发工资输入框的值清空
    document.getElementById('shifa').value = "";
}
    </script>
</head>
</head>
<body>
    <div id="quan">
        <h1>工资计算器</h1>
        <div id="zuo">
            <h3>工资（月薪 税前）</h3>
            <p>
                收入类型：<br>
                <select >
                    <option value="one">工资（税前）</option>
                </select>
            </p>
            <p>
                纳税期数：<br>
                <select  id="nashui">
                    <option value="yi">1</option>
                    <option value="er">2</option>
                    <option value="san">3</option>
                    <option value="si">4</option>
                    <option value="wu">5</option>
                </select>
            </p>
            <p>
                本月工资: <br>
                <input type="text" id="gongzi" oninput="shuru()">
                元
            </p>
            <p>
                累计： <br>
                <input type="text" id="leiji">
                元
            </p>
            <p>
                各项社会保险费：<br>
                <input type="text" id="baoxian" oninput="shuru2()">
                元
            </p>
            <p>
                累计： <br>
                <input type="text" id="leiji2">
                元
            </p>
        </div>


        <div id="you">
            <h3>个人所得税计算结果</h3>
            <p>
                应纳所得额<span id="e">0</span>元
            </p>
            <p>
                使用税率<span id="shuilv">0</span>%
            </p>
            <p>
                速算扣除数<span id="kouchu">0</span>元
            </p>
            <p>
                累计应缴税款：<br>
                <input type="text" id="yingjiao">
                元
            </p>
            <p>
                已缴税款： <br>
                <input type="text" id="yijiao">
                元
            </p>
            <p>
                应补（退）税款： <br>
                <input type="text" id="tui">
                元
            </p>
            <p>
                实发工资： <br>
                <input type="text"  id="shifa">
                元
            </p>
        </div>
        <p>
            <button onclick="jiusuan()">计算</button>
            <button onclick="chongzhi()">重置</button>
        </p>
    </div>
</body>
</html>